<!--
 * @Author: csh
 * @Date: 2022-08-12
 * @LastEditors: BigFlower
 * @LastEditTime: 2022-10-23 16:33:25
 * @Description: file content
 * @FilePath: \wochat-vue3-ts-pinia\src\views\test\test.vue
-->

<template>
  <div class="chat-main">
    <div style="flex: 1; background-color: blueviolet">
      <el-button style="margin: 20px" type="primary" @click="visible = !visible"
        >Open the teleport</el-button
      >
    </div>
    <div id="happyDiv" style="flex: 1">hello</div>
    <Teleport to="body" v-if="visible">
      <div class="teleport-content">
        <div class="content-below">
          <img :src="Pic" alt="pic" />
          <p></p>
        </div>
        <div class="content-above">
          <img :src="Pic" alt="avator" />
          <div class="content-above-top">
            <div style="height: 20px">张学友</div>
            <div style="font-size: 12px">等待对方接受邀请...</div>
          </div>
          <div class="content-above-operation">
            <div>
              <el-button class="btn" circle
                ><img class="btn-circle-content" draggable="false" />
              </el-button>
              <div>取消</div>
            </div>
            <div>
              <el-button class="btn" circle
                ><img class="btn-circle-content" draggable="false" />
              </el-button>
              <div>取消</div>
            </div>
            <div>
              <el-button class="btn" circle
                ><img class="btn-circle-content" draggable="false" />
              </el-button>
              <div>取消</div>
            </div>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import Pic from "@/public/avator/girl.jpg";

const visible = ref(false);
</script>

<style>
.chat-main {
  height: 100%;
  width: 100%;
  display: flex;
  background-color: lightsalmon;
}

.teleport-content {
  width: 300px;
  height: 500px;
  background: white;
  position: fixed;
  vertical-align: middle;
  top: 10%;
  left: 40%;
  border-radius: 4px;
}

.content-above {
  position: flex;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.content-above img {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 2px;
  margin: 20px;
}
.content-above-top {
  position: absolute;
  height: 42px;
  border-radius: 3px;
  margin: 21px 70px;
  color: rgb(202, 201, 201);
}
.content-above-operation {
  vertical-align: bottom;
  display: flex;
}
.content-below {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
}
.content-below img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px);
}
.content-below p {
  position: absolute;
  opacity: 0.5;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: black;
}

.my-font-size {
  font-size: 32px;
}
</style>
